<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VUE + Element-Plus</title>
    <link rel="stylesheet" href="../vue/element-plus/index.css" />
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .el-header,
      .el-footer {
        background-color: #b3c0d1;
      }

      .el-aside {
        background-color: #d3dce6;
      }

      .el-main {
        background-color: #e9eef3;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <el-container>
        <el-header>
          <el-row justify="space-between">
            <el-col :span="2">
              <el-avatar :size="60" :src="logo.url" :fit="logo.fit" />
            </el-col>
            <el-col :span="7">
              <el-menu
                default-active="1"
                class="el-menu-demo"
                mode="horizontal"
                background-color="#b3c0d1"
                text-color="#fff"
                active-text-color="#ffd04b"
              >
                <el-menu-item index="1">Processing Center</el-menu-item>
                <el-sub-menu index="2">
                  <template #title>Workspace</template>
                  <el-menu-item index="2-1">item one</el-menu-item>
                  <el-menu-item index="2-2">item two</el-menu-item>
                  <el-menu-item index="2-3">item three</el-menu-item>
                </el-sub-menu>
                <el-menu-item index="3">Info</el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-header>
        <el-container>
          <el-aside>
            <el-row>
              <el-col>
                <el-menu
                  active-text-color="#ffd04b"
                  background-color="#545c64"
                  class="el-menu-vertical-demo"
                  default-active="2"
                  text-color="#fff"
                  :default-openeds="openeds"
                >
                  <el-sub-menu index="1">
                    <template #title>
                      <el-icon><location /></el-icon>
                      <span>Navigator One</span>
                    </template>
                    <el-menu-item-group title="Group One">
                      <el-menu-item index="1-1">item one</el-menu-item>
                      <el-menu-item index="1-2">item two</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="Group Two">
                      <el-menu-item index="1-3">item three</el-menu-item>
                    </el-menu-item-group>
                    <el-sub-menu index="1-4">
                      <template #title>item four</template>
                      <el-menu-item index="1-4-1">item one</el-menu-item>
                    </el-sub-menu>
                  </el-sub-menu>
                  <el-menu-item index="2">
                    <el-icon><icon-menu /></el-icon>
                    <span>Navigator Two</span>
                  </el-menu-item>
                  <el-menu-item index="3" disabled>
                    <el-icon><document /></el-icon>
                    <span>Navigator Three</span>
                  </el-menu-item>
                  <el-menu-item index="4">
                    <el-icon><setting /></el-icon>
                    <span>Navigator Four</span>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
          </el-aside>
          <el-container>
            <el-main>
              <el-row justify="space-between">
                <el-col :span="2"><h1>学生列表</h1></el-col>
                <el-col :span="2"
                  ><el-button
                    type="primary"
                    size="large"
                    @click="dialogVisible = true"
                    >添加学生</el-button
                  ></el-col
                >
              </el-row>
              <el-row>
                <el-col>
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column
                      prop="date"
                      label="日期"
                      width="180"
                    ></el-table-column>
                    <el-table-column
                      prop="name"
                      label="姓名"
                      width="180"
                    ></el-table-column>
                    <el-table-column
                      prop="address"
                      label="地址"
                    ></el-table-column>
                    <el-table-column label="操作">
                      <template #default="scope">
                        <el-button
                          size="small"
                          @click="handleEdit(scope.$index, scope.row)"
                          >Edit</el-button
                        >
                        <el-button
                          size="small"
                          type="danger"
                          @click="handleDelete(scope.$index, scope.row)"
                          >Delete</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-main>
            <el-footer>footer</el-footer>
          </el-container>
        </el-container>
      </el-container>

      <el-dialog
        v-model="dialogVisible"
        title="Tips"
        width="30%"
        :before-close="handleClose"
      >
        <span>This is a message</span>
        <input />
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="dialogVisible = false">
              Confirm
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <script src="../vue/vue.global.js"></script>
    <script src="../vue/element-plus/index.js"></script>
    <script src="./index.js"></script>
  </body>
</html>
